<template>
  <div class="page">
    <!-- 顶部：返回 | 新增/编辑 -->
    <div class="page-header">
      <span class="back" role="button" @click="goList">
        <LeftOutlined class="back-icon" />
        <span class="back-text">返回</span>
      </span>
      <span class="h-sep">|</span>
      <span class="title">{{ isEdit ? "编辑" : "新增" }}</span>
    </div>

    <!-- 新父级 -->
    <div class="content-area">
      <!-- 主体 -->
      <div class="body">
        <div class="content">
          <a-form
            ref="formRef"
            :model="form"
            :rules="rules"
            :label-col="{ style: { width: '96px' } }"
            :wrapper-col="{ style: { width: '520px' } }"
            autocomplete="off"
          >
            <a-form-item label="原词：" name="Original_word">
              <a-input
                v-model:value="form.Original_word"
                placeholder="请输入原词"
                allow-clear
              />
            </a-form-item>

            <a-form-item label="处理后词：" name="Processed_words">
              <a-input
                v-model:value="form.Processed_words"
                placeholder="请输入处理后词"
                allow-clear
              />
            </a-form-item>

            <a-form-item label="状态：" name="status">
              <a-radio-group v-model:value="form.status">
                <a-radio value="published">启用</a-radio>
                <a-radio value="draft">停用</a-radio>
              </a-radio-group>
            </a-form-item>
          </a-form>
        </div>
      </div>

      <!-- 底部 -->
      <div class="page-footer">
        <div class="content footer-inner">
          <a-button type="link" class="cancel-btn" @click="goList">取消</a-button>
          <span class="sep">|</span>
          <a-button
            type="link"
            class="ok-btn"
            role="button"
            :loading="saving"
            @click="onSubmit"
          >确定</a-button>
        </div>
      </div>

      <div class="bottom-gap" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted, computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import type { FormInstance, Rule } from "ant-design-vue/es/form";
import { message } from "ant-design-vue";
import { LeftOutlined } from "@ant-design/icons-vue";

import {
  createCustomWord,
  getCustomWordById,
  updateCustomWord,
  type CustomWordItem,
} from "@/api/modules/customWords.api";

const FALLBACK_LIST = "/customWordSegmentation";

const route = useRoute();
const router = useRouter();
const id = route.query.id as string | undefined;
const ret = route.query.ret as string | undefined;

const isEdit = computed(() => !!id);

const formRef = ref<FormInstance>();
const saving = ref(false);

const form = reactive<
  Pick<CustomWordItem, "Original_word" | "Processed_words" | "status">
>({
  Original_word: "",
  Processed_words: "",
  status: "published",
});

const rules: Record<string, Rule[]> = {
  Original_word: [{ required: true, message: "请输入原词" }],
  Processed_words: [{ required: true, message: "请输入处理后词" }],
  status: [{ required: true, message: "请选择状态" }],
};

function goList() {
  if (ret) router.replace(ret);
  else router.replace({ path: FALLBACK_LIST });
}

async function loadDetail() {
  if (!id) return;
  const detail = await getCustomWordById(id, [
    "id",
    "Original_word",
    "Processed_words",
    "status",
  ]);
  if (detail) {
    form.Original_word = detail.Original_word || "";
    form.Processed_words = detail.Processed_words || "";
    form.status = (detail.status as any) || "published";
  }
}

async function onSubmit() {
  await formRef.value?.validate();
  saving.value = true;
  try {
    const payload = {
      Original_word: (form.Original_word || "").trim(),
      Processed_words: (form.Processed_words || "").trim(),
      status: (form.status as any) || "published",
    };
    if (isEdit.value && id) {
      await updateCustomWord(id, payload);
      message.success("保存成功");
    } else {
      await createCustomWord(payload);
      message.success("新增成功");
    }
    goList();
  } finally {
    saving.value = false;
  }
}

onMounted(loadDetail);
</script>

<style lang="less" scoped>
@pad-x: 24px;
@wrap-max: 520px;  
@label-w: 96px;  
@safe-bottom: env(safe-area-inset-bottom);

.page {
  min-height: 100vh;
  min-height: 100dvh;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
}

/* 顶部栏 */
.page-header {
  display: flex;
  align-items: center;
  padding: 14px @pad-x;
  border-bottom: 1px solid #f0f0f0;
  font-size: 14px;
  flex: 0 0 auto;

  .back {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    color: #81889c;
    user-select: none;

    .back-icon {
      font-size: 16px;
      color: #bfbfbf;
    }
  }

  .h-sep {
    color: #bfbfbf;
    margin: 0 12px;
  }

  .title {
    font-size: 16px;
    font-weight: 600;
    color: #222;
  }
}

/* 新父级滚动容器 */
.content-area {
  flex: 1 1 auto;
  min-height: 0; 
  display: flex;
  flex-direction: column;
  overflow-y: auto; 
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;

  /* 自定义滚动条 */
  &::-webkit-scrollbar { width: 10px; height: 10px; }
  &::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.15);
    border-radius: 6px;
    border: 2px solid transparent;
    background-clip: padding-box;
  }
  &::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.25); }
  &::-webkit-scrollbar-track { background: transparent; }

  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.25) transparent;
  scrollbar-gutter: stable;

  padding-bottom: calc(16px + @safe-bottom);
}

/* 表单区 */
.body {
  padding: 20px @pad-x 0 85px; 
  box-sizing: border-box;

  :deep(.ant-form-item) {
    margin-bottom: 20px;
  }
  :deep(.ant-form-item-label > label) {
    font-size: 14px;
  }
}


.content {
  max-width: @wrap-max;
}

/* 底部操作栏 */
.page-footer {
  position: static;
  margin-top: 16px;
  padding: 12px @pad-x calc(12px + @safe-bottom) @pad-x;
  background: #fff;
  border-top: 1px solid #f0f0f0;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.03);

  .footer-inner {
    max-width: @wrap-max;   
    width: 100%;
    margin: 0 auto;        
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    padding-left: @label-w;  
  }

  .sep {
    color: #e5e7eb;
    user-select: none;
    line-height: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    margin: 0 2px;
  }
}

/* 优化按钮外观 */
.cancel-btn {
  height: 36px;
  padding: 0 16px;
  border-radius: 8px;
  background: #fafafa !important;
  border: 1px solid #e8e8e8 !important;
  color: #666 !important;
  transition: all 0.2s ease;
}
.cancel-btn:hover {
  background: #fff !important;
  color: #595959 !important;
  border-color: #d9d9d9 !important;
}

.ok-btn {
  height: 36px;
  padding: 0 20px;
  border-radius: 8px;
  font-weight: 600;
  background: #1677ff !important;
  border: 1px solid #1677ff !important;
  color: #fff !important;
  transition: box-shadow 0.2s ease, filter 0.2s ease;
}
.ok-btn:hover {
  filter: brightness(1.02);
  box-shadow: 0 2px 8px rgba(22, 119, 255, 0.2);
}

/* 末尾留白 */
.bottom-gap { height: 8px; }

/* 小屏优化 */
@media (max-width: 576px) {
  .page-header { padding: 12px 12px; }
  .body { padding: 16px 12px 0 12px; }
  .page-footer { padding-left: 12px; padding-right: 12px; }
}
</style>
